<template>
  <view class="myPosP">
    <view class="searchPP">
      <image
        @click="goBackM"
        style="width: 0.6rem; height: 1rem; padding: 0rem 0.5rem 0rem 0rem"
        src="../../style/image/cargo/leftarow.jpg"
        alt=""
      />
      <view class="searchP">
        <view class="search" :style="{ width: '100%' }">
          <u-search
            placeholder="请输入商户名称"
            shape="round"
            v-model="keyword"
			@search="searchShop"
            :show-action="false"
          ></u-search>
        </view>
        <!-- <view @click="celendarM" class="celendar">
                <image :style="{ width:'1.1rem',height:'1.1rem', margin:'0rem 0.5rem'}" src="../../style/image/stati/日历@3x.png" alt="">
                <view>2019.10.09</view>
                </view> -->
      </view>
    </view>

    <view class="a">
      <view class="allDataC-item-content">
        <view class="itemData">
          <view>{{shopTotalDic.shopCount}}</view>
          <view class="dataText">总商户数</view>
        </view>
        <view class="itemData">
          <view>{{shopTotalDic.notTreminalCount}}</view>
          <view class="dataText">无设备商户数</view>
        </view>
        <view class="itemData">
          <view>{{shopTotalDic.notLineCount}}</view>
          <view class="dataText">设备不在线</view>
        </view>
      </view>
    </view>

    <view class="b">
      <view style="background-color: white">
        <u-dropdown>
          <u-dropdown-item
          
            v-model="value4"
            title="状态"
            active-color='#01b075'
            :options="options4"
			@change="change4"
          ></u-dropdown-item>
          <u-dropdown-item
            v-model="value3"
            title="排序"
            active-color='#02b075'
            :options="options3"
			@change="change3"
          ></u-dropdown-item>
        </u-dropdown>
      </view>
    </view>

    <view class="c">
      <view
        style="background-color: #f3f5f7; padding: 1rem"
        class="repairListsP"
      >
        <view
          class="repairLists"
          v-for="(item, index) in myShopLists" :key="index">
          <view class="repairLists-child"  @click="goposDetailedM(item.id)" >
            <view class="repairLists-top">
              <view style="display: flex; align-items: center">
                <image
                  style="width: 1rem;height:1rem; margin-right: 0.3rem"
                  src="../../style/image/myPos/mypos.png"
                  alt=""
                />
                <view>
                  商户名称：{{item.shopName}}<span
                    style="background: rgb(255, 237, 237) none repeat scroll 0% 0%;
                           padding: 0.2rem;border-radius: 3px;color: #D03434;font-size: 0.5rem;"
                    > {{profitString(item.profitPattern,item.profitRatio)}}</span
                  >
                </view>
              </view>

              <view style="
font-size: 0.65rem;
font-family: PingFang SC;
font-weight: 300;
color: #02AF74;" >{{isOnLine(item.onlineState)}}</view>
            </view>

            <view class="repairLists-head">
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  创建时间
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  {{item.createTime}}
                </view>
              </view>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  计费制度
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  {{priceString(item.billingPattern,item.billingPrice,item.billingMaxPrice)}}
                </view>
              </view>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin: 0.2rem 0rem;
                "
              >
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  商户收益
                </view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                  "
                >
                  <span style="color: #FF0000 " >¥{{item.blance}}</span>
                </view>
              </view>
            </view>
          </view>
        </view>
		
		<!-- <u-empty   style="margin-top:0rem;" v-if="myShopLists.length==0" text="暂无数据" mode="data"></u-empty> -->
		
      </view>
    </view>
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import { findShopList } from "../../utils/uniApi";
import { findShopStatistics } from "../../utils/uniApi";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;
  
  public keyword:any='';//搜索关键字
  
  public orderBy:any='';//排序
  public shopStatus:any='';//状态

  public value4 = 0;
  public value3 = 0;
  
  public options4 = [
    {
      label: "综合",
      value: '0',
    },
    {
      label: "已铺货",
      value: 'yph',
    },
    {
      label: "未铺货",
      value: 'wph',
    },
    {
      label: "掉线",
      value: 'dx',
    },
    {
      label: "在线",
      value: 'zx',
    }
  ];
  public options3 = [
    {
      label: "全部",
      value: '0',
    },
    {
      label: "收益倒序",
      value: 'syDesc',
    },
    {
      label: "收益正序",
      value: 'syAsc',
    },
    {
      label: "创建时间倒序",
      value: 'timeDesc',
    },
    {
      label: "创建时间正序",
      value: 'timeAsc',
    },
  ]
 public myShopLists=[];//我的商户列表
 public shopTotalDic:any = {};//我的商户统计信息

  created() {}
  
  onHide(){
  	  uni.hideLoading();
  }
  
  
  onShow(){
	  this.findShopStatistics();
	  this.findShopList(this.orderBy,this.shopStatus,this.keyword);
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }
  
  //下拉刷新
  onPullDownRefresh() {
      setTimeout(function () {
        uni.redirectTo({
          url: "../../pages/myPos/index",
        });
        uni.stopPullDownRefresh();
      }, 1000);
  }
  
  searchShop(value:any){
	  console.log('输出搜索的值：'+value)
  	  this.keyword = value
  	  this.findShopList(this.orderBy,this.shopStatus,this.keyword);
  }
  
  //全部排序下拉框
  change3(value:any){
  	  if(value == 0){
		  this.orderBy = ''
  	  }else{
  		  this.orderBy = value
  	  }
  	 this.findShopList(this.orderBy,this.shopStatus,this.keyword);
  }
  
  //全部状态下拉框
  change4(value:any){
  	  if(value == 0){
		  this.shopStatus = ''
  	  }else{
  		  this.shopStatus = value
  	  }
  	 this.findShopList(this.orderBy,this.shopStatus,this.keyword);
  }
  //是否在线 计算
  isOnLine(type:any){
  	  if(type == '0'){
  		  return '在线'
  	  } else if (type == '1'){
  		  return '离线'
  	  } else{
  		  return '离线'
  	  }
  }
  //分润模式 计算
  profitString(profitPattern:any,profitRatio:any){
  	  if(profitPattern == 0){
  		  return '绝对分润' + profitRatio*100 + '%'
  	  } else if (profitPattern == 1){
  		  return '相对分润' + profitRatio*100 + '%'
  	  }
  }
  //计费方式 计算
  priceString(type:any,price: any,maxprice: any){
  	  if(type == '1'){
  		  return price + '元/30分钟 '+maxprice+'元封顶'
  	  } else if (type == '2'){
  		  return price + '元/60分钟 '+maxprice+'元封顶'
  	  }
  }
  
  //查询商户统计
  findShopStatistics(){
  	  
  	  let params = {
  		userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  findShopStatistics(params).then((res: any) => {
  	      if(res.data.code==200){
  			  this.shopTotalDic = res.data.data
  	      }else{
  	      
  	      }
  	  });
  }
  
  
  //拉取我的商户数据
  findShopList(orderBy:any,status:any,key:any){
  	  uni.showLoading({
  	  	title: '加载中'
  	  });
  	  let params = {
  		orderBy:orderBy, 
  	    state: status,
		shopName:key,
  		userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  console.log('++++++++++++++++++++我的商户的参数：' + JSON.stringify(params) )
  	  findShopList(params).then((res: any) => {
  		  
  	    console.log('++++++++123++++++++++++我的商户：' + JSON.stringify(res) )
  	      if(res.data.code==200){
			  if(this.myShopLists.length>0){//搜索和筛选时清除已有数据
				  this.myShopLists = []
			  }
			  this.myShopLists = res.data.data
			  uni.hideLoading();
			  
  	      }else{
			  uni.hideLoading();
			  uni.showToast({
			  	title: '数据加载失败',
			  	icon: 'none',
			  	duration: 2000
			  });
  	      }
  	  });
  }
  
  
  goBackM(){
	  uni.navigateBack({
	     delta: 1,
	  });
  }
  goposDetailedM(id:any){
    uni.navigateTo({
		url: './posDetailed?shopId='+id
    });

  }
}
</script>

<style  lang="scss"  scoped>
.myPosP{
  background-color: #f3f5f7;
  height: 100vh;
}

.searchPP {
  background-color: white;
  padding: 0.5rem;

  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.allDataC-item-content {
 background-color: white;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid#e8e8e8;
}

.itemData {
  text-align: center;
  padding: 1rem 0.5rem;
  width: 30%;
  text-align: center;
}
.itemData :first-child {
  margin-bottom: 0.3rem;
}

.dataText {
  font-size: 0.67rem;
  font-family: PingFang SC;
  font-weight: 399;
  color: #000000;
  width: 1000;
}

.repairLists {
  background-color: white;
  margin-bottom: 1rem;
  border-radius: 0.2rem;
  /* padding: 1rem; */
  /* margin: 1rem; */
}

.repairLists-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid #e8e8e8;
}

.repairLists-child {
  border-bottom: 1px solid #e5e5e5;
}
.repairLists-head {
  padding: 1rem;
}

.repairBtn {
  width: 4.5rem;
  height: 1.5rem;
  background: #ffffff;
  border: 1px solid #02af74;
  border-radius: 0.3rem;
  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #02b074;
  text-align: center;
  align-items: center;
  line-height: 1.5rem;
}
</style>